<template>
  <view style="">
    <view class="banner-swiper-wrap mb5">
      <!-- 标题栏 -->
      <view class="u-navbar u-navbar-fixed" :style="[navbarStyle]">
        <view class="nav-bg" :style="[navBg]"></view>
        <view
          class="u-status-bar"
          :style="{ height: statusBarHeight + 'px' }"
        ></view>
        <view class="u-navbar-inner" :style="[navbarInnerStyle]">
          <view class="u-back-wrap">
            <!-- <image src="../../static/logo.png" mode=""></image> -->
          </view>
          <!-- <view class="search-box u-flex u-row-center u-col-center u-m-r-30">
						<view class="search-content" @click="onSearch">
							<view class="search">
								<u-icon name="search" size="34" :style="[navTitleColor]" style="margin: 0 15rpx;">
								</u-icon>
								<input class="sm-mn" placeholder-style='color:#999' type="text" confirm-type='search'
									@input="onInput" v-model="searchVal" placeholder="请输入" :style="[navTitleColor]">
								<image v-show="searchVal" @tap="clearSearch" class="close"
									src="../../static/images/close.png" mode="">
								</image>
							</view>
						</view>
						<view class="u-iconfont uicon-search" :style="[navTitleColor]"></view>
					</view> -->
        </view>
      </view>
      <!-- 轮播组件 -->
      <swiper
        class="screen-swiper square-dot"
        @change="onChange"
        style="height: 520rpx"
        :indicator-dots="true"
        :circular="true"
        :autoplay="true"
        interval="5000"
        duration="500"
      >
        <swiper-item
          v-for="(item, index) in swiperList"
          :key="index"
          @tap="bannerss(item.link)"
        >
          <image :src="item.url" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
    </view>

    <!-- 导航 -->
    <div class="nav">
      <u-grid :border="false" col="5">
        <u-grid-item
          @click="navClick(item)"
          v-for="(item, index) in navList"
          :key="index"
        >
          <image
            :src="
              item.icon ||
              'https://building-d.oss-cn-hangzhou.aliyuncs.com/img/img.jpg'
            "
            mode=""
          ></image>
          <text class="grid-text">{{ item.name }}</text>
        </u-grid-item>
      </u-grid>
    </div>
    <!-- 商品列表 -->
    <view class="list">
      <view class="listItem" v-for="(val, key, i) in list" :key="i">
        <view class="type">
          <text class="text">{{ key }}</text>
          <text class="more" @click="navListClick(i)">查看更多></text>
        </view>
        <view class="commod">
          <view
            class="commodItem"
            @click="shopinfor(item)"
            v-for="(item, index) in val"
            :key="index"
          >
            <GoodItem :good="item"></GoodItem>
          </view>
        </view>
      </view>
    </view>

    <u-modal :show="show" @confirm="modalConfirm" title="提示">
      <view class="slot-content">
        <rich-text :nodes="content"></rich-text>
      </view>
    </u-modal>
  </view>
</template>

<script>
import {
  mallProductCategory,
  mallProductIndexPage,
  jcCustom,
  jcCustomContacts,
} from "@/api/home.js";
import { getCategoryTree } from "@/api/cate.js";
import GoodItem from "@/components/goodItem/index";

// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
export default {
  data() {
    return {
      userId: uni.getStorageSync("mUserinfo").user_id,
      navBgImage: "",
      changeNavBackground: false,
      swiperCur: 0,
      statusBarHeight: systemInfo.statusBarHeight,
      navBg: {
        opacity: 0,
      },
      navTitleColor: {
        color: "#fff",
      },

      scrollTop: 0,
      recordtab: [],
      recordindex: 0, //切换下标
      searchVal: "",
      keywords: "",
      swiperList: [
        {
          url: "https://building-d.oss-cn-hangzhou.aliyuncs.com/img/login111111.png",
        },
      ],
      navList: [], // 导航栏
      list: [],
      show: false,
      content:
        "尊敬的客户您好!<br>您的账号信用额度已为0，<br>请尽快联系销售人员进行处理。<br>谢谢!",
      customId: "",
    };
  },
  components: {
    GoodItem,
  },
  computed: {
    // 导航栏内部盒子的样式
    navbarInnerStyle() {
      let style = {};
      style.height = this.navbarHeight + "px";
      // #ifdef MP
      let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
      style.marginRight = rightButtonWidth + "px";
      // #endif
      return style;
    },
    // 整个导航栏的样式
    navbarStyle() {
      let style = {};
      style.zIndex = this.$u.zIndex.navbar;
      style.background = "none";
      Object.assign(style, this.background);
      return style;
    },
    navbarHeight() {
      // #ifdef APP-PLUS || H5
      return 44;
      // #endif
      // #ifdef MP
      return systemInfo.platform == "ios" ? 44 : 48;
      // #endif
    },
  },
  // onReachBottom() {
  // 	// console.log('到底了事件触发')
  // 	this.getlist(this.sortindex)
  // },
  onLoad(option) {
    var that = this;
    // #ifdef H5
    that.headerTop = "44px";
    // #endif
    /* */
    if (option.id > 0) {
      that.id = option.id;
    }
    //#ifdef MP-WEIXIN
    var fid = option.scene;
    if (fid == undefined) {
      if (wx.getStorageSync("fid") > 0) {
      } else {
        fid = "0";
      }
    } else {
      wx.setStorageSync("fid", fid);
    }
    //#endif
  },
  onShow() {
    // 获取导航栏
    this.getCategoryPage();
    // 获取列表数据
    this.mallProductIndexPage();
    // 判断信用额度是否为0
    this.jcCustomContacts();
    uni.removeStorageSync("detail1");
  },
  onPageScroll(e) {
    let top = e.scrollTop;
    this.navBg = {
      opacity: top > this.navbarHeight ? 1 : top * 0.01,
    };
    this.navTitleColor = {
      color: top > this.navbarHeight ? "#000" : "#fff",
    };
  },
  onPullDownRefresh() {
    // 获取导航栏
    this.getCategoryPage();
    // 获取列表数据
    this.mallProductIndexPage();
    uni.stopPullDownRefresh();
  },
  methods: {
    // 判断信用额度是否为空
    async jcCustomContacts() {
      if (!uni.getStorageSync("mUserinfo").user_id) {
        return;
      }
      const res = await jcCustomContacts({
        userId: uni.getStorageSync("mUserinfo").user_id,
      });
      if (res) {
        this.customId = res.customId;
      }
    },
    modalConfirm() {
      this.show = false;
    },
    // 获取导航栏
    async getCategoryPage() {
      const res = await mallProductCategory({
        size: 8,
        current: 1,
        parentId: 0,
        level: 1,
      });
      this.navList = res.records;
    },
    // 获取列表数据
    async mallProductIndexPage() {
      const res = await mallProductIndexPage();
      this.list = res;
    },
    // 键盘搜索
    async onSearch() {
      uni.navigateTo({
        url: "/pages/home/search",
      });
    },

    onChange(e) {
      this.swiperCur = e.detail.current;
    },
    confirm(e) {
      this.startprice = this.huoList[e[0]].jhmoney;
      if (e[0] + 1 < this.huoList.length) {
        this.endprice = this.huoList[e[0] + 1].jhmoney;
      } else {
        this.endprice = "99999999";
      }
      this.list = [];
      this.getlist(0);
    },
    cancel() {
      this.startprice = "";
      this.endprice = "";
      this.list = [];
      this.getlist(0);
    },
    showErji(id) {
      this.showimg = !this.showimg;
      this.typeId = id;
    },
    rChoose(id, value, index) {
      this.cate_id = id;
      this.rSelectIndex = value;
      this.intIndex = index;
      // if(this.rSelect.indexOf( value )!=-1){
      // 	this.rSelect.splice( this.rSelect.indexOf( value), 1 );
      // }else{
      // 	this.rSelect.push(value);
      // }
    },
    bannerss: function (a) {
      uni.navigateTo({
        url: a,
      });
    },
    timeFormat(param) {
      //小于10的格式化函数
      return param < 10 ? "0" + param : param;
    },
    iconurl: function (url, type) {
      if (type == 1) {
        //#ifndef MP-WEIXIN
        window.location.href = url;
        //#endif
        //#ifdef MP-WEIXIN
        uni.navigateTo({
          url: "/pages/index/web?link=" + url,
        });
        //#endif
        return true;
      }

      var pattern = new RegExp("[#]");
      var rs = "";
      for (var i = 0; i < url.length; i++) {
        rs = rs + url.substr(i, 1).replace(pattern, "");
      }
      url = rs;

      if (url == "fengxinag") {
        this.erweima();
        return true;
      }
      uni.reLaunch({
        url: url,
      });
    },
    // 切换分类
    recordtabs: function (index, id) {
      this.page = 0;
      this.recordindex = index;
      this.getlist(id);
    },
    //筛选点击
    tabClick(index) {
      this.page = 0;
      if (this.filterIndex === index && index !== 1 && index !== 2) {
        return;
      }
      this.filterIndex = index;
      if (index === 1) {
        this.xiaoLOrder = this.xiaoLOrder === 1 ? 2 : 1;
      } else {
        this.xiaoLOrder = 0;
      }
      if (index === 2) {
        this.priceOrder = this.priceOrder === 1 ? 2 : 1;
      } else {
        this.priceOrder = 0;
      }
      this.getlist();
    },
    getLowInput(e) {
      this.lowInput = e.detail.value;
    },
    getTallInput(e) {
      this.tallInput = e.detail.value;
    },
    //筛选确定
    baocunFun() {
      this.cateMaskState = 0;
      this.page = 0;
      this.goodsList = [];
      this.getlist(this.sortindex);
    },
    baocunFun1() {
      this.cate_id = 0;
      this.intIndex = -1;
      this.rSelectIndex = -1;
      this.lowInput = "";
      this.tallInput = "";
      this.startprice = "";
      this.endprice = "";
    },
    stopPrevent() {},
    // 点击排序
    sortb: function (index) {
      this.page = 0;
      this.sortindex = index;
    },
    //商品详情
    async shopinfor(item) {
      uni.navigateTo({
        url: `/pages/goods/detail?productId=${item.productId}&name=${item.name}`,
      });
    },
    async getFirst(item) {
      const res = await getCategoryTree({
        navStatus: 1,
        showStatus: 1,
      });
      const x = res.find((xxx) => xxx.id === item.id);
      let y = "";
      if (x && x.children) {
        y = x.children[0].id;
      }
      return y;
    },
    async navClick(item) {
      //   const y = await this.getFirst(item)
      uni.setStorageSync("navName", item.id);
      uni.switchTab({
        url: "/pages/cate/index",
      });
    },
    navListClick(i) {
      uni.setStorageSync("navName", this.navList[i].id);
      uni.switchTab({
        url: "/pages/cate/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #e9ecf4;
}

.bar {
  height: 90upx;
}

// 轮播图
.screen-swiper {
  image {
    width: 100%;
    height: 100%;
  }
}

@font-face {
  font-family: "iconfont";
  /* project id 1639347 */
  src: url("https://at.alicdn.com/t/font_1639347_9tnhp28j8vi.eot");
  src: url("https://at.alicdn.com/t/font_1639347_9tnhp28j8vi.eot?#iefix")
      format("embedded-opentype"),
    url("https://at.alicdn.com/t/font_1639347_9tnhp28j8vi.woff2")
      format("woff2"),
    url("https://at.alicdn.com/t/font_1639347_9tnhp28j8vi.woff") format("woff"),
    url("https://at.alicdn.com/t/font_1639347_9tnhp28j8vi.ttf")
      format("truetype"),
    url("https://at.alicdn.com/t/font_1639347_9tnhp28j8vi.svg#iconfont")
      format("svg");
}

.iconfont {
  font-family: "iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-shitu01:before {
  content: "\e615";
}

.icon-shitu02:before {
  content: "\e605";
}

.search-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search {
  width: 100%;
  height: 60rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  background-color: #ffffff;
}

.search input {
  width: 60%;
}

.search image {
  width: 40rpx;
  height: 40rpx;
  margin: 0 15rpx;
}

.close {
  width: 30rpx;
  height: 30rpx;
}

.sou {
  background: #eb702d;
  padding: 8rpx 10rpx;
  color: #ffffff;
  border-radius: 10rpx;
}

// 轮播
.banner-swiper-wrap {
  height: 520rpx;
  position: relative;
  z-index: 100;

  .search-box {
    width: 60%;
    height: 60rpx;
    background: rgba(#000, 0.18);
    border-radius: 100rpx;
  }

  .hover-search {
    background: rgba(#fff, 0.18);
  }
}

.u-navbar {
  width: 100%;
}

.u-navbar-fixed {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 991;

  .nav-bg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 980;
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-shadow: 0px 4px 6px rgba(140, 140, 140, 0.32);
  }
}

.u-status-bar {
  width: 100%;
}

.u-navbar-inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  align-items: center;
  position: relative;
  z-index: 990;
}

.u-back-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
  flex-grow: 0;
  padding: 14rpx 14rpx 14rpx 24rpx;

  image {
    width: 138rpx;
    height: 71rpx;
  }
}

// 导航栏
.nav {
  padding: 20rpx;

  .u-grid {
    background-color: #fff;
    border-radius: 15rpx;
    padding: 20rpx;
  }

  image {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
  }

  .grid-text {
    margin-top: 20rpx;
    font-size: 28rpx;
  }
}

// 商品列表
.list {
  .type {
    display: flex;
    justify-content: space-between;
    padding: 15rpx 20rpx;
    background-color: #ffffff;

    .text {
      font-weight: 700;
      font-size: 32rpx;
      color: #333;
    }

    .more {
      font-size: 28rpx;
      color: #999;
    }
  }

  .commod {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    padding: 0 20rpx;

    .commodItem {
      width: 350rpx;
      margin-bottom: 20rpx;
      border-radius: 10rpx;

      background-color: #ffffff;
      overflow: hidden;
    }
  }
}
</style>
